<template>
  <div>
    <Section class="pb-0">
      <div class="relative grid gap-2 pt-4 md:grid-cols-2 lg:grid-cols-3">
        <PostCard
          v-for="post in topHitsPosts?.query.results"
          :key="post.id"
          :post="post"
          reading
        />
      </div>
    </Section>
    <Section class="pb-0" underline>
      <SectionTitle
        title="阅读量最多的文章"
        description="这里选取了在每个标签中阅读量最多的文章，让您可以通过不同标签来了解网站的热度文章。"
      />
      <div class="relative -mt-2 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <PostCard
          v-for="post in tagTop1?.query.results"
          :key="post.id"
          :post="post"
          :tag="{ id: post.tagId, name: post.tagName }"
          round
        />
      </div>
    </Section>
    <Section class="pb-0" underline>
      <SectionTitle
        title="活跃度最高的作者"
        description="在这里我们选取了活跃度最高的作者，让您可以了解网站的活跃作者。并快速了解他们，了解他们的文章和独特观点。"
      />
      <div
        class="grid grid-cols-2 gap-x-6 gap-y-8 md:grid-cols-3 lg:grid-cols-5"
      >
        <div
          v-for="author in topAuthors?.query.results"
          :key="author.id"
          class="group relative flex flex-col justify-center text-center"
        >
          <div class="relative mx-auto mb-4 h-20 w-20 md:h-28 md:w-28">
            <img
              :src="author.avatar ?? `/api/avatar/${author.nickname}.svg`"
              :alt="author.nickname"
              class="h-full w-full rounded-full object-cover object-center"
            />
          </div>
          <h3 class="font-sans text-lg font-medium">
            <RouterLink
              :to="{ name: 'author-details', params: { id: author.id } }"
            >
              {{ author.nickname }}
            </RouterLink>
          </h3>
          <p class="font-sans text-sm text-base-content/60">{{ author.job }}</p>
        </div>
      </div>
    </Section>
    <Section>
      <div class="w-full rounded-3xl bg-base-200 p-0 sm:p-6 lg:p-10">
        <div
          class="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-y-4 md:flex-row"
        >
          <SectionTitle
            title="最新发布的文章"
            description="随时了解我们最新的文章，我们站点的作者精心挑选的最新内容！"
          />
          <InnerLinks />
        </div>
        <div
          v-if="latestPosts?.success"
          class="mx-auto grid max-w-6xl gap-6 sm:gap-4 md:grid-cols-12"
        >
          <div class="col-span-12 sm:col-span-6 lg:col-span-6">
            <PostCardWithDigest
              class="h-full bg-base-100"
              :post="top1!"
              digest
            />
          </div>
          <div class="col-span-12 sm:col-span-6 lg:col-span-6">
            <div class="grid w-full gap-4 md:grid-cols-2">
              <PostCardWithDigest
                class="bg-base-100"
                v-for="post in residue"
                :key="post.id"
                :post="post"
              />
            </div>
          </div>
        </div>
      </div>
    </Section>
  </div>
</template>
<script setup lang="ts">
import InnerLinks from "@/components/InnerLinks.vue";
import PostCard from "@/components/PostCard.vue";
import PostCardWithDigest from "@/components/PostCardWithDigest.vue";
import SectionTitle from "@/components/SectionTitle.vue";
import { useApiFetch, ApiResponse } from "@/composables/useApiFetch";
import { Post, User, Resume } from "@/stores/types";
import { RouterLink } from "vue-router";
// 获取阅读数量最多的三个文章
const { data: topHitsPosts, execute: executeTopHits } = useApiFetch(
  "/posts?orderby=-hits&limit=3",
  {
    immediate: false,
  },
).json<ApiResponse<Post & User>>();
// 获取所有公共标签阅读量最高的文章
const { data: tagTop1, execute: executeTagTop1 } = useApiFetch(
  "/posts/tags-top1",
  { immediate: false },
).json<ApiResponse<Post & User & { tagId: number; tagName: string }>>();
// 获取前10位活跃的作者
const { data: topAuthors, execute: executeTopAuthors } = useApiFetch(
  "/users-top10",
  { immediate: false },
).json<ApiResponse<User & Resume>>();
// 获取前5篇最新的文章
const { data: latestPosts, execute: executeLatest } = useApiFetch(
  "/posts?orderby=-createdAt&limit=5",
  { immediate: false },
).json<ApiResponse<Post & User>>();

const top1 = computed(() => latestPosts.value?.query.results[0]),
  residue = computed(() => {
    return latestPosts.value?.query.results.slice(1);
  });

onActivated(async () => {
  await executeTopHits();
  executeLatest();
  executeTagTop1();
  executeTopAuthors();
});
</script>
